<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="/res/css/teaAndAdminlogin.css" />
    <script src="/res/js/tealogin.js"></script>

    <!-- 需要先引入tracking后引入face -->
    <script src="/res/js/tracking-min.js"></script>
    <script src="/res/js/face-min.js"></script>
    <script src="/res/js/jquery.js"></script>
<!--    <script src="/res/js/jquery-3.5.1.min.js"></script>-->
</head>
<body>
<div class="main">
    <header>
        <div id="div2"><a href="/teacherlogin">切换登录方式</a></div>
        区块链学院学生竞赛管理系统<br>教师人脸登录入口
        <div id="div1"></div>
    </header>
    <h4 align="center" class="title">点击进行人脸识别</h4>
    <section class="click_login">
        <div class="circle imgCoverCon">
            <img src="/res/images/1233.png" />
        </div>

        <div class="video-div demo-frame">
            <!-- <div class="inner-video"> -->
            <video id="video" preload autoplay loop muted></video>
            <!-- </div> -->
        </div>

        <div class="canvas-div face-capture">
            <!-- <div class="inner-canvas"> -->
            <canvas id="canvas"></canvas>
            <!-- </div> -->
        </div>

        <div class="face">
            <img src="/res/images/121.png" />
        </div>
    </section>
</div>

<script>
    var clickOn = true; //有没有被点击
    var tipFlag = false; // 提示用户已经检测到
    var flag = false; // 判断是否已经拍照
    var removePhotoID = null; // 停止转换图片
    //获取需要使用的元素节点
    var video = document.getElementById('video');
    //获取画布的元素节点
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    //开启tracking的face人脸识别功能
    var tracker = new tracking.ObjectTracker('face');
    var width = window.screen.width;
    var height = window.screen.height;
    $('.title').html('点击头像进行识别..')
    //点击获取摄像头
    $('.click_login').click(() => {
        $('.face').hide();
        if (clickOn == true) {
            $('.title').html('系统正在识别..')
            getVideo();
        }
    })
    // 获取摄像头获取的视频
    function getVideo() {
        $('.demo-frame').show();
        clickOn = false; //识别的时候不能点击
        // 开始设置tracker参数
        tracker.setInitialScale(4);
        tracker.setStepSize(2);
        tracker.setEdgesDensity(0.1);
        //开始识别
        $('.title').html('系统已开启识别')
        //打开摄像头，对video视频进行识别
        tracking.track('#video', tracker, {
            camera: true
        });
        //检测人脸
        tracker.on('track', handleTracked);
    }
    // 追踪事件--人脸开始识别
    function handleTracked(e) {
        $('.videoFace').hide();
        // 清除画布中原始数据
        context.clearRect(0, 0, canvas.width, canvas.height);
        if (e.data.length == 0) {
            $('.title').html('未检测到人脸 请动一动')
        } else {
            if (!tipFlag) {//!false =true
                $('.title').html('检测成功，正在拍照，请保持不动2秒')
            }
            // 1秒后拍照，仅拍一次
            if (!flag) {//没有拍照，能够进入拍照，但是如果用户已经拍过了，不能再次拍照
                flag = true
                removePhotoID = setTimeout(() => {
                    tackPhoto();
                    tipFlag = true
                }, 2000) // 1s钟之后拍一次找
            }
            e.data.forEach(function (rect) {
                context.strokeStyle = '#ffa126';
                context.strokeRect(rect.x, rect.y, rect.width, rect.height);
                context.font = '5px Helvetica';
                context.fillStyle = "#fff";
            });
        }
    };
    // 保存为png,base64格式图片
    function saveAsPNG(c) {
        //toDataURL() 可以将图片转为base64格式
        return c.toDataURL('image/png', 0.3)
    };
    // 拍照
    var a; //需要传递给后台的base64格式的图片
    function tackPhoto() {
        //拍照（实际就是从video中将图片画出来）
        //后台存储图片使用base64
        context.drawImage(video, 0, 0, canvas.width, canvas.height)
        // 保存为base64格式
        $('.videoConImg').attr('src', saveAsPNG(canvas));
        a = saveAsPNG(canvas).substring(22);//string
        $.ajax({
            // url: 'http://10.87.221.198:8000/facedbsearch',
            // url: 'http://49.232.173.197:8000/user/facerecognition',
            url: 'http://localhost:8080/teacher/facerecognition',
            type: 'POST',
            async: true,
            data: {
                //传递给后台的数据
                // imgFile: a,
                imgUrl: a,
            },
            dataType: "JSON", //后台返回的数据格式json
            success: function (res) {
                // console.log(res);
                if (res.cardid == "") {//在人脸识别库没有找到对应的人脸，说明人脸识别失败
                    $("#info").html("人脸识别失败！");
                }
                else {
                    alert('识别成功,即将跳转...');
                    setTimeout(function () {
                        localStorage.setItem("tea",res);
                        localStorage.setItem("id",res.id);
                        window.location.href = "/teacherFaceIndex";
                        console.log(res.res.cardid);
                        // HTML5种的web storage包含两种存储方式：
                        // localStorage和sessionStorage，这两种方式存储的数据不会自动发给服务器，仅仅是本地保存，有大小
                        // 限制。
                        // //获取id
                        // var user_id = window.localStorage.getItem('id');
                        // window.localStorage.setItem('id', res.res.cardid);
                    }, 1000)
                }
                succefun();
                // //跳转页面原地方
                // console.log(res);
            },
            // error: function (res) {
            // alert('接口调用失败')
            // }
        })
        close();
    }
    function close() {
        // 关闭并清理资源
        flag = false
        tipFlag = false
        this.showFailPop = false
        $('.face-capture').hide();
        $('.videoImgPhoto').show();
        tracker && tracker.removeListener('track', this.handleTracked)
        tracker = null
        context = null
        profile = []
        clearTimeout(this.removePhotoID)
    }
    //识别成功逻辑
    function succefun() {
        $('.face-capture').hide();
        $('.videoImgPhoto').show();
        $('.side_right').addClass('rightAnimations');
        $('.side_left').addClass('leftAnimations');
    }
</script>

</body>
</html>
